<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Login to Oauth Services">
    <meta name="author" content="Rex Ijiekhuamen <dev.rexijie@gmail.com>">
    <title>LOG IN</title>
    <link rel="stylesheet" href="/css/global.css">
    <link rel="stylesheet" href="/css/login.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&family=Slabo+27px&display=swap"
          rel="stylesheet">
    <link rel="icon" href="/img/favicon.ico" type="image/png">
</head>
<body>
<div class="form-container">
    <form class="form" th:action="@{/oauth2/login}" method="post">
        <h1 class="form-header header">LOG IN</h1>

        <div class="form-row">
            <label class="form-label" for="username">Username</label>
            <input class="form-input" type="text" id="username" name="username" required autofocus>
        </div>

        <div class="form-row">
            <label class="form-label" for="password">Password</label>
            <input class="form-input" type="password" id="password" name="password" required>
        </div>
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>

        <div th:if="${error}" class="form-row">
            <span class="form-error" th:text="${error}">BAD CREDENTIALS</span>
        </div>

        <div class="form-footer d-flex-row f-justify-end">
            <button class="button btn-primary login-btn" type="submit">LOGIN</button>
        </div>
    </form>
</div>
</body>
</html>
